"use client"

import { getJob } from '@/clientApi/monitor/job';
import { listJobLog } from '@/clientApi/monitor/jobLog';
import RenderIconsCustom from '@/components/CustomIconSelector/conponents';
import { useConfirmModal } from '@/utils/ConfirmModal';
import useResponsiveLayout from '@/utils/useResponsiveLayout';
import { CaretRightOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
import { Button, Col, Form, Input, Modal, Row, Select, Space, Switch, Table, TableProps, Tag, Tooltip } from 'antd';
import { useParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import DetailJobLogView from '../component/DetailJobLogView';
interface DataType {
}
const JobLogView = () => {


    const { id } = useParams(); // 获取动态参数

    const { confirm } = useConfirmModal();
    const initialQueryParams = {
        pageNum: 1,
        pageSize: 10,
        jobName: undefined,
        jobGroup: undefined,
        status: undefined,

    };

    interface DataType {
    }

    const [form] = Form.useForm();
    const [forceUpdateKey, setForceUpdateKey] = useState(0); // 用于强制更新组件的 key
    const [dataList, setDataList] = useState<DataType[]>([]);
    const columns: TableProps<DataType>['columns'] = [
        {
            title: '日志编号',
            dataIndex: 'jobLogId',
            key: 'jobLogId',
            align: 'center'
        },
        {
            title: '任务名称',
            dataIndex: 'jobName',
            key: 'jobName',
            align: 'center'
        },
        {
            title: '任务组名',
            dataIndex: 'jobGroup',
            key: 'jobGroup',
            align: 'center'
        }, {
            title: '调用目标字符串',
            dataIndex: 'invokeTarget',
            key: 'invokeTarget',
            align: 'center'
        }, {
            title: 'cron执行表达式',
            dataIndex: 'cronExpression',
            key: 'cronExpression',
            align: 'center'
        }, {
            title: '日志信息',
            dataIndex: 'jobMessage',
            key: 'jobMessage',
            align: 'center'
        }, {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            align: 'center',
            render: (_, record: any) => (
                <div>{record.status}</div>
            )
        }, {
            title: '执行时间',
            dataIndex: 'createTime',
            key: 'createTime',
        }, {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            render: (_, record: any) => (
                <Space size="middle">
                    {(
                        <Tooltip title="详细">
                            <Button
                                type="link"
                                size="small"
                                icon={<EyeOutlined />}
                                onClick={() => DetailClick(record)} />
                        </Tooltip>
                    )}
                </Space>
            ),
        },
    ];
    const [queryParams, setQueryParams] = useState(initialQueryParams);
    const [title, setTitle] = useState<string>('')
    const [total, setTotal] = useState(0);
    const [open, setOpen] = useState<boolean>(false);
    const [record, setRecord] = useState<Record<string, any>>({});
    useEffect(() => {
        if (id) {
            getJob(id).then((res: any) => {
                setQueryParams({
                    ...queryParams,
                    jobName: res.data.jobName,
                    jobGroup: res.data.jobGroup,
                })
                form.setFieldsValue({
                    jobName: res.data.jobName,
                    jobGroup: res.data.jobGroup,
                })
            });
        }
    }, [id])
    useEffect(() => {
        getList();
    }, [queryParams]);  // 监听 queryParams 变化，调用 getList

    /** 查询用户列表 */
    function getList() {
        listJobLog(queryParams).then((res: any) => {
            setDataList(res.rows.map((item: any) => ({
                ...item,
                key: item.jobId // 使用 userId 作为唯一的 key
            })))
            setTotal(res.total); // 更新 total，用于分页
        });
    }

    // 查询列表
    const handleSearch = () => {
        form.validateFields().then(values => {
            console.log(values, 'values')
            setQueryParams(prevQueryParams => ({
                ...queryParams,
                jobName: values.jobName,
                status: values.status,
                jobGroup: values.jobGroup,
            }));
        });
    }

    // 重置查询
    const resetSearch = () => {
        form.resetFields();
        setQueryParams(initialQueryParams); // 重置为初始状态
    }

    // 分页变化
    const handleTableChange = (page: number, pageSize: number) => {
        setQueryParams({
            ...queryParams,
            pageNum: page,
            pageSize: pageSize,
        });
    };
    // 详情按钮
    const DetailClick = (record: any) => {
        // 这里可以显示一个模态框展示详细信息
        setOpen(true)
        setTitle("详情")
        setRecord(record)
    }




    return (
        <div className='home'>
            <Row gutter={20} style={{ paddingTop: "20px" }}>
                <Col span={24}>
                    <div><Form
                        form={form}
                        name="customized_form_controls"
                        style={{ marginTop: 10, marginLeft: 10, marginBottom: 10 }}
                        layout={useResponsiveLayout("inline")}>
                        <Form.Item
                            name="jobName"
                            label="任务名称">
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="jobGroup"
                            label="任务分组">
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name="status"
                            label="状态">
                            <Select
                                style={{
                                    width: 120,
                                }}
                                allowClear
                                options={[
                                    {
                                        value: 0,
                                        label: '正常',
                                    }, {
                                        value: 1,
                                        label: '停用',
                                    },
                                ]}
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" onClick={handleSearch} style={{
                                marginRight: 20,
                            }}>
                                查询
                            </Button>
                            <Button type="primary" htmlType="reset" onClick={resetSearch}>
                                重置
                            </Button>
                        </Form.Item>
                    </Form></div>
                    <Table<DataType> columns={columns} dataSource={dataList} pagination={{
                        current: queryParams.pageNum,
                        pageSize: queryParams.pageSize,
                        total: total,
                        showSizeChanger: true, // 显示分页尺寸切换器
                        pageSizeOptions: ['10', '20', '50'], // 分页尺寸选项
                        onChange: handleTableChange
                    }} />
                </Col>
            </Row>
            {open && <DetailJobLogView title={title} open={open} record={record} OnCanCle={() => {
                setOpen(false);
                getList();
            }} />}



        </div>
    )
};

export default JobLogView;
